<template>
 <footer class="footer">
      <span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
      <ul class="filters" @click="$emit('changType',type)">
        <li>
          <a @click.prevent="type ='all' " :class="{selected:type === 'all'}" href="#/">全部</a>
        </li>
        <li>
          <a 
          @click.prevent="type ='active' "
          :class="{selected:type === 'active'}" 
          href="#/active">进行中</a>
        </li>
        <li>
          <a @click.prevent="type ='completed' " :class="{selected:type === 'completed'}"  href="#/completed">已完成</a>
        </li>
      </ul>
      <button @click="hClear" v-show="clearDone"  class="clear-completed">清除已完成</button>
    </footer>
</template>

<script>
export default {
  name: 'VueDay3TodoFooter',
  props:{
    list:{
      type:Array,
      required:true
    }
  },

  data() {
    return {
      type:'all'
      
    };
  },
  methods: {


  },
  computed:{
    leftCount(){
      return this.list.length
    },
    clearDone(){
      return this.list.some(item => item.isDone)
    }
  },

  
  methods: {
    hClear() {
      this.$emit('clearDone')

    }
    
  },
};
</script>

<style lang="scss" scoped>

</style>